<template>
  <div class="home">
    <a-spin :spinning="pinningRank">
    <div class="floor">
      <div v-for="(item, index) in statData" :key="index" :class="item.clasStyle">
        <a-row>
          <a-col :span="12" class="iconWrap">
            <a-icon :type="item.icon"/>
          </a-col>
          <a-col :span="12">
            <!-- <p>{{ Number(toThreeBit(item.num)) }}</p> -->
            <h3 v-if="isNaN(toThreeBit(item.num))">{{ toThreeBit(item.num) }}</h3>
            <h3 v-else><count-to :start-val="0" :end-val="Number(toThreeBit(item.num))" :duration="1500"  /></h3>
            <span>{{ item.label }}</span>
          </a-col>
        </a-row>
      </div>
    </div>

    <a-row :gutter="24" class="mainWrap">
      <!-- <a-col :span="16" class="canvasWrap">
        <a-card :bordered="true" type="inner" class="cardWrap">
          <chartPie title="通道" />
        </a-card>
      </a-col> -->
      <a-col :span="16" class="canvasWrap">
        <a-card :bordered="true" type="inner" class="cardWrap">
          <p class="topTitle">支付类型基本信息</p>
          <!-- <a-divider/> -->
          <!-- <a-progress type="circle" :percent="percData" /> -->
          <chartCusPie title="支付类型" :orderTypeList="orderTypeList"/>
        </a-card>
      </a-col>
      <a-col :span="8" class="canvasWrap">
        <a-card :bordered="true" type="inner" class="cardWrap">
          <ranking :rankingList="rankingList" :pinningRank="pinningRank" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="24" class="mainWrap">
      <a-col :span="24" class="canvasWrap">
        <a-card :bordered="true" type="inner" class="cardWrap">
          <categoryLine />
        </a-card>
      </a-col>
    </a-row>
    </a-spin>
  </div>
</template>

<script>
import * as API from "../../api/home"
import CountTo from 'vue-count-to'
import { mapState } from "vuex";
import { toThreeBit } from "../../utils/filter"
import categoryLine from './commponent/categoryLine'
import ranking from './commponent/ranking'
// import chartPie from '../../commonComponents/chart/pie'
import chartCusPie from '../../commonComponents/chart/cusPie'

export default {
  name: "Home",
  data() {
    return {
      statData: [
        { icon:'shop', clasStyle: 'one', label:'入驻商户', num: 0 },
        { icon:'branches', clasStyle: 'two', label:'支付通道', num: 0 },
        { icon:'credit-card', clasStyle: 'three', label:'商户订单', num: 0 },
        { icon:'money-collect', clasStyle: 'four', label:'充值金额', num: 0 },
      ],
      rankingList: [],
      orderTypeList: [],
      percData: 0,
      pinningRank:false,
      pageData:{
        page: 10,
        merchantNo: null
      }
    }
  },
  components: {
    categoryLine,
    ranking,
    // chartPie,
    chartCusPie,
    CountTo
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted() {
    console.log(this.$constans)
    this.getLeaderboardList()
    // this.setIntervalAction('percData', 70)
  },
  activated() {},
  methods: {
    toThreeBit,
    getLeaderboardList(){
      this.pageData.merchantNo = this.userInfo.merchantRespParams ? this.userInfo.merchantRespParams.merchantNo : null
      this.pinningRank = true
      API.getLeaderboard(this.pageData).then(res => {
        if (res.code === 200) {
          this.rankingList = res.data.orderAmountParams;
          this.orderTypeList = res.data.orderTypeAmountParams;
          this.statData[0].num = res.data.countMerchant
          this.statData[1].num = res.data.countChannel
          this.statData[2].num = res.data.countOrder
          this.statData[3].num = res.data.countOrderAmount
          this.statData[0].label = this.userInfo.merchantRespParams ? '今日充值' : '入驻商户'
        }
        this.pinningRank = false;
      }).catch(()=>{
        this.pinningRank = false
      })
    },
    setIntervalAction(percData ,num){
      let time = setInterval(()=>{
      this[percData] ++
      if(this[percData]>=num){
        clearInterval(time)
      }
    }, 10)
    }
  }
};
</script>

<style lang="less" scoped>
  .home{
    .floor {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>div{
        text-align: right;
        height: 150px;
        position: relative;
        width: 23%;
        padding:30px 20px;
        border-radius: 10px;
        box-shadow: 0 4px 5px 0px #ccc;
        color: #ffffff;
        overflow: hidden;
        .iconWrap{
          font-size: 60px;
          opacity: .5;
          text-align: left;
        }
        h3{
          color:#fff;
          font-size: 26px;
          font-weight: normal;
        }
      }
      &>div::after {
          content: '';
          display: block;
          position: absolute;
          top: -45%;
          right: -15%;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background-color: rgba(255,255,255,.1)
        }
      &>div::before {
          content: '';
          display: block;
          position: absolute;
          bottom: -10%;
          right: -15%;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          background-color: rgba(255,255,255,.3)
        }
      .one{
        background-image: linear-gradient(to right, #47ddfd, #3cc4fc, #35b2fa);
      }
      .two{
        background-image: linear-gradient(to right, #f78986, #f77a85, #f77c82);
      }
      .three{
        background-image: linear-gradient(to right, #b69ff9, #9d89fc, #6981f4);
      }
      .four{
        // background-image: linear-gradient(to right, #589efb, #4f6efb, #506afb);
        background-image: linear-gradient(to right, #a5e261, #70dc7f, #48d69b);
      }
    }
    // canvasWrap
    .mainWrap{
      margin: 30px 0;
      .cardWrap{
        border-radius: 10px;
      }
    }
    .topTitle{
        color: @blueColor;
        font-weight: bold;
    }
  }
</style>
